import React, { useState, useEffect } from "react";
import { Button } from "antd";
//模拟从服务器异步获取数据
const queryData = () => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([10, 20, 30])
        }, 1000)
    })
}
function Demo(props) {
    let [num, setNum] = useState(0)
    //
    /*
    //useEffect必须在函数的最外层上下文中调用，不能把其嵌入到条件判断、循环等操作语句中
    if(num > 5){
        useEffect(()=>{
            console.log(num);
        })
    } */
    useEffect(() => {
        if (num > 5) {
            console.log(num);
        }
    }, [num])
    const handler = () => {
        setNum(num + 1);
    }
    //第一次渲染完毕后，从服务器异步获取数据
    /**
     * useEffect如果设置返回值，则返回值必须是一个函数【代表组件销毁时触发】；下面案例中，callback经过async 修饰，返回的是一个 promise 实例，不符合要求！！
    useEffect(async()=>{
        let data = await queryData();
        console.log(data);
    },[])
     */
   /* 
   //方式一
    useEffect(()=>{
        queryData().then(success=>{
            console.log(success);
        })
    },[]) */
    //方式二
    useEffect(()=>{
        const next = async ()=>{
            const data = await queryData();
            console.log(data);
        }
        next();
    },[])
    return <div>
        <span className="num">{num}</span>
        <Button onClick={handler}>点我加一</Button>
    </div>
}
export default Demo